<template>
  <div class="file-upload-box">
    <el-upload
      class="upload-demo file-upload"
      :action="action"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :on-change="handleChange"
      :file-list="fileList"
      :limit="1"
      :on-exceed="handleExceed"
      :accept="accept"
      :headers="headers"
      :on-success="handleSuccess"
    >
      <el-button type="primary"><i class="el-icon-plus"></i>点击上传</el-button>
    </el-upload>
    <!-- <el-dialog :visible.sync="previewVisible" :before-close="handleClose" append-to-body>
      <img :src="imgUrl" class="img-preview" />
    </el-dialog> -->
  </div>
</template>

<script>
export default {
  name: "ImageUpload",
  props: {
    value: {
      type: Array,
      default: () => [],
    }, // 用于双向绑定上传的文件列表
    // accept上传文件，不允许上传图片,
    accept: {
      type: String,
      default: ".pdf,.doc,.docx,.xls,.xlsx,.txt",
    },
  },
  data() {
    return {
      fileList: this.value || [], // 文件列表
      previewVisible: false,
      action: 'https://web.krycomm.com//admin_service.php?action=upload_uploadFile', // 上传地址
      imgUrl: "",
      headers: {
        //Authorization: "Bearer " + localStorage.getItem("token"),
      },
    };
  },
  watch: {
    value(newVal) {
      this.fileList = newVal;
    },
  },
  methods: {
    handlePreview(file) {
      this.imgUrl = file.url || URL.createObjectURL(file.raw);
      this.previewVisible = true;
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      this.fileList.splice(index, 1);
      this.$emit("input", this.fileList); // 更新父组件的文件列表
    },
    beforeUpload(file) {
      // 校验文件格式和大小
      const isPdf = file.type === "application/pdf";
      const isDoc = file.type === "application/msword";
      const isDocx =
        file.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
      const isXls = file.type === "application/vnd.ms-excel";
      const isXlsx =
        file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      const isTxt = file.type === "text/plain";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isPdf && !isDoc && !isDocx && !isXls && !isXlsx && !isTxt) {
        this.$message.error("上传文件格式不正确!");
      }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 2MB!");
      }
      return isPdf || isDoc || isDocx || isXls || isXlsx || isTxt && isLt2M;
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
      this.$emit("input", this.fileList); // 更新父组件的文件列表
    },
    handleExceed(files, fileList) {
      this.$message.warning(`只能上传一个文件`);
    },
    handleClose(done) {
      this.previewVisible = false;
      done();
    },
    handleSuccess(res, file) {
      this.$message.success(res.msg);
      this.fileList = [];
      this.$emit("input", this.fileList); // 更新父组件的文件列表
    },
  },
};
</script>

<style scoped>
.image-upload{
  display: flex;
  flex-direction: column;
  width: 80px;
  height: 80px;
  background: #FFFFFF;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #D9D9D9;
}
.img-preview {
  width: 100%;
  max-height: 80vh;
}

</style>
<style>
.img-upload2{
  width: 100%;
  height: 100%;
}
.img-upload2 .el-upload{
  width: 100%;
  height: 100%;
  border: none;
  background: #FFFFFF;
}
.img-upload2 .el-upload .el-upload__text{
  width: 100%;
  height: 100%;
  line-height: 20px;
  padding-top: 15px;
}
.img-upload2 .el-upload--picture-card i{
  font-size: 14px;
}
.img-upload2 .el-upload-list__item{
  width: 80px !important;
  height: 80px !important;
}
.img-upload2 .el-upload-list__item-actions{
  width: 80px !important;
  height: 80px !important;
}
</style>
